<template>
  <div class="trading_sale">
    <div class="balance_wrap">
      <span>MyYTCC</span>
      <span class="balance">{{balance}}</span>
    </div>
    <div class="turn_out">
      <div class="turn_out_title">
        <span>Sale quantityYTCC</span>
      </div>
      <div class="input_wrap">
        <input type="number" :placeholder="`Minimum sale volume${minAmount},And the need is integer`" v-model="amount" @input="clearNum">
      </div>
      <div class="exchange">
        <span class="left">Service ChargeYTCC</span>
        <span class="right">{{serviceCharge}}</span>
      </div>
      <div class="prompt">Platform collection{{percent}}%Handling fee, if transaction fails, service fee will be returned.</div>
    </div>
    <div class="turn_out price_wrap">
      <div class="turn_out_title">
        <span>Sell univalent(CNY)</span>
        <span class="interval">Unit price interval: {{minPrice}} - {{maxPrice}}</span>
      </div>
      <div class="input_wrap">
        <input type="number" placeholder="Please enter the unit price in the interval" v-model="money" @input="clearNum">
      </div>
      <div class="exchange">
        <span class="left">Expected income</span>
        <span class="right">{{income}} CNY</span>
      </div>
    </div>
    <div class="confirm">
      <span class="public_btn" @click="confirm">Confirm the sale</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tradingSale',
  data () {
    return {
      balance: '',
      minAmount: null,
      amount: '',
      percent: null,
      minPrice: '',
      maxPrice: '',
      money: '',
      trueName: '',
      idCard: ''
    };
  },
  beforeMount () {
    this.getData();
  },
  computed: {
    serviceCharge () {
      if (this.amount) {
        return (this.amount * parseFloat(this.percent) * 0.01).toFixed(2);
      } else {
        return '0.00';
      }
    },
    income () {
      if (this.amount && this.money) {
        return (this.amount * parseFloat(this.money)).toFixed(2);
      } else {
        return '0.00';
      }
    }
  },
  methods: {
    // Clear the two decimal places.
    clearNum () {
      if (/\./g.test(this.money) && this.money.toString().split('.')[1].length > 2) {
        this.money = this.money.substr(0, this.money.length - 1);
      }
    },
    confirm () {
      if (!this.amount) {
        this.Toast('Please enter sales volume.');
      } else if (parseFloat(this.amount) > parseFloat(this.balance)) {
        this.Toast('YTCCSorry, your credit is running low');
      } else if (this.amount < parseFloat(this.minAmount)) {
        this.Toast(`Please enter greater than${this.minAmount}Sales volume`);
      } else if (!(/^[1-9]\d*$/.test(this.amount))) {
        this.Toast('The number of sales must be integers.');
      } else if (!this.money) {
        this.Toast('Please enter the unit price in the interval.');
      } else if (parseFloat(this.money) < parseFloat(this.minPrice) || parseFloat(this.money) > parseFloat(this.maxPrice)) {
        this.Toast('Please enter the correct price in the interval.');
      } else {
        this.getInfo();
      }
    },
    // get data
    getData () {
      this.axios.get('index/tradinghall/sell_trading_page').then(({data}) => {
        if (data.status === 200) {
          this.balance = data.xxm;
          this.percent = data.data.propor.split('%')[0];
          this.minAmount = data.data.num;
          this.minPrice = data.data.low_sell;
          this.maxPrice = data.data.up_sell;
        } else {
          this.Toast(data.message);
        }
      });
    },
    // Sell and submit
    submit () {
      this.axios.post('index/tradinghall/sell_trading', {
        xxm: this.amount,
        price: this.money,
        num: this.income,
        shou_nums: this.serviceCharge
      }).then(({data}) => {
        if (data.status === 200) {
          this.Toast('Success in selling');
          this.$router.push({path: 'order', query: {orderIndex: 1}});
        } else if (data.status === 207) {
          this.Modal('Not to sell', 'You have an order for sale and you can continue to sell it after the order is completed.。', 'Sure', () => {
            this.$router.push({path: 'order', query: {orderIndex: 1}});
          });
        } else {
          this.Toast(data.message);
        }
      });
    },
    // get data
    getInfo () {
      this.axios.get('index/rename/rename_s').then(({data}) => {
        if (data.status === 200) {
          this.trueName = data.data.username;
          this.idCard = data.data.id_card;
          if (!this.trueName || !this.idCard) {
            this.Modal('Real name authentication', 'You do not have real name authentication yet., Please go to the certification first.', 'To authenticate', () => {
              this.$router.push('certification');
            });
          } else {
            this.submit();
          }
        } else if (data.status === 201) {
          if (!this.trueName || !this.idCard) {
            this.Modal('Real name authentication', 'You do not have real name authentication yet., Please go to the certification first.', 'To authenticate', () => {
              this.$router.push('certification');
            });
          }
        } else {
          this.Toast(data.message);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
  @import '../style/mixin.scss';
  .trading_sale{
    margin-top: 20px;
    background-color: #f5f5f5;
    .balance_wrap{
      width: 100%;
      height: 108px;
      padding: 0 28px;
      font-size: 28px;
      color: #282828;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      margin-bottom: 20px;
    }
    .turn_out{
      width: 100%;
      background-color: #fff;
      padding: 0 32px;
      margin-bottom: 22px;
      .turn_out_title{
        width: 100%;
        height: 86px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28px;
        color: #999;
        .sel_country{
          display: flex;
          align-items: center;
          >span{
            font-size: 26px;
            color: $color;
            margin-right: 10px;
          }
          .iconfont{
            font-size: 24px;
            color: #999;
            margin-top: 2px;
          }
        }
      }
      .input_wrap{
        width: 100%;
        height: 106px;
        border-bottom: 1px solid #e6e6e6;
        position: relative;
        input{
          font-size: 60px;
          color: #282828;
          padding-left: 42px;
          width: 100%;
          height: 100%;
          &::placeholder{
            font-size: 30px;
            color: #999;
          }
        }
        &::before{
          display: block;
          content: '';
          width: 2px;
          height: 50px;
          background-color: #999;
          position: absolute;
          bottom: 30px;
          left: 10px;
        }
      }
      .exchange{
        width: 100%;
        height: 106px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e6e6e6;
        .left{
          font-size: 28px;
          color: #282828;
        }
        .right{
          font-size: 30px;
          color: #282828;
        }
      }
      .prompt{
        width: 100%;
        // height: 106px;
        // line-height: 106px;
        line-height: 2;
        font-size: 28px;
        color: #666;
      }
      &.price_wrap{
        margin-bottom: 80px;
        .turn_out_title{
          display: flex;
          justify-content: space-between;
          align-items: center;
          .interval{
            color: $with;
          }
        }
        .exchange{
          border-bottom: none;
        }
      }
    }
    .confirm{
      width: 100%;
      text-align: center;
    }
  }
</style>
